<template>
  <w-table-view
    :types="types"
    :search-bar-options="searchBarOptions"
    :list-data="listData"
    icon-name="pic"
    title-name="title"
    describe-name="date"
    detail-name="describe"
    class="w-nav-height"
    detail-path="/web/study"
  />
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import { Api } from '@/config/api'
import WTableView from '@/components/global/tableview/searchBar'
import Study from '~/models/study'

@Component({
  layout: 'web',
  name: 'WebStudy',
  components: {
    WTableView
  },
  fetch ({ store }) {
    store.commit('app/SET_NAV_INDEX', '/web/study')
  },
  async asyncData ({ app, route }) {
    const { $wAxios } = app
    const data = await Promise.all([
      $wAxios.$get(Api.study.types),
      $wAxios.$get(Api.study.list, route.query)
    ])
    return { types: data[0], listData: data[1] }
  },
  head () {
    return {
      title: '学习总结'
    }
  }
})
export default class WebStudy extends Vue {
  searchBarOptions = ['所有', '标题', '描述', '内容']

  listData!: Array<Study>

  @Watch('$route.query')
  async queryChange (query: object) {
    this.listData = await this.$wAxios.$get(Api.study.list, query)
  }
}
</script>

<style scoped lang="less"></style>
